@import url("https://fonts.googleapis.com/css2?family=Reggae+One&display=swap");

.wrapper {
  margin         : auto;
  background     : #000;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: space-between;

  p {
    position           : relative;
    font-size          : 6vw;
    line-height        : 16vw;
    overflow           : hidden;
    font-family        : "Reggae One", cursive;
    /* 文字边框属性： 宽度+颜色 */
    -webkit-text-stroke: 3px #7272a5;

    &::before {
      content         : " ";
      width           : 100%;
      height          : 100%;
      position        : absolute;
      left            : 0;
      top             : 0;
      background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
      mix-blend-mode  : multiply;
    }

    &::after {
      content        : "";
      background     : radial-gradient(circle, #fff, #000 50%);
      background-size: 25% 25%;
      position       : absolute;
      top            : -100%;
      left           : -100%;
      right          : 0;
      bottom         : 0;
      mix-blend-mode : color-dodge;
      animation      : mix 8s linear infinite;
    }
  }

  @keyframes mix {
    to {
      transform: translate(50%, 50%);
    }
  }
}